<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/selected.css">
    <link rel="stylesheet" href="font/iconfont.css">
</head>
<body>
    <div class="header"></div>
    <div class="xian"></div>
    <div class="recommend center">
        <div class="left">&nbsp;  热门推荐</div>
        <div class="right">
            <ul>
                <li>
                    <img src="img/4_thumb_G_1622166067601.jpg" alt="">
                    <div class="right-two">
                        <p>新疆压榨一级白糯米(送新疆骏枣1000g)</p>
                        <span>￥169.00</span>
                        <button>立即购买</button>
                    </div>
                </li>
                <li>
                    <img src="img/4_thumb_G_1622235127632.jpg" alt="">
                    <div class="right-two">
                        <p>新疆压榨一级白糯(送新疆</p>
                        <span>￥169.00</span>
                        <button>立即购买</button>
                    </div>
                </li>
                <li>
                    <img src="img/4_thumb_G_1622237218142.jpg" alt="">
                    <div class="right-two">
                        <p>新疆压榨一级白糯米(送新疆骏枣1000g)</p>
                        <span>￥169.00</span>
                        <button>立即购买</button>
                    </div>
                </li>
                <li>
                    <img src="img/4_thumb_G_1622237337839.jpg" alt="">
                    <div class="right-two">
                        <p>新疆压榨一级白糯米(送新疆骏枣1000g)</p>
                        <span>￥169.00</span>
                        <button>立即购买</button>
                    </div>
                </li>
            </ul>

        </div>

    </div>
    <div class="center goodstypes">
    </div>
    <!--================== 商品列表======================= -->
    <div class="goodslists center">
        <div class="shaixuan">

        </div>
       <ul class="uls">

       </ul>
        <!-- <ul class="uls">
            <li>
                <img src="img/111.jpg" alt="" class="img1">
                <div><span class="s1">￥45.00</span>
                <span class="s3">已售2504件</span></div>
                <p class="p1">1kg芝麻酱</p>
                <p class="p2">豫扶</p>
                <span class="s2"></span>
                <div class="kuang">
                  <div class="duibi">
                    <span class="iconfont icon-icon
                    "></span>对比
                  </div>
                  <div class="shoucang">
                    <span class="iconfont icon-shoucang
                    "></span>
                      收藏
                  </div>
                  <div class="shopcar">
                    <span class="iconfont icon-gouwuche
                    "></span>
                        加入购物车
                  </div>
                </div>
            </li>
            <li>
                <img src="img/0_thumb_G_1621387594366.jpg" alt="" class="img1">
                <div><span class="s1">￥45.00</span>
                <span class="s3">已售2504件</span></div>
                <p class="p1">1kg芝麻酱</p>
                <p class="p2">豫扶</p>
                <span class="s2"></span>
                <div class="kuang">
                    <div class="duibi">
                        <span class="iconfont icon-icon
                        "></span>对比
                      </div>
                      <div class="shoucang">
                        <span class="iconfont icon-shoucang
                        "></span>
                          收藏
                      </div>
                      <div class="shopcar">
                        <span class="iconfont icon-gouwuche
                        "></span>
                            加入购物车
                      </div>
                </div>
            </li>
            <li>
                <img src="img/111.jpg" alt="" class="img1">
                <div><span class="s1">￥45.00</span>
                <span class="s3">已售2504件</span></div>
                <p class="p1">1kg芝麻酱</p>
                <p class="p2">豫扶</p>
                <span class="s2"></span>
                <div class="kuang">
                    <div class="duibi">
                        <span class="iconfont icon-icon
                        "></span>对比
                      </div>
                      <div class="shoucang">
                        <span class="iconfont icon-shoucang
                        "></span>
                          收藏
                      </div>
                      <div class="shopcar">
                        <span class="iconfont icon-gouwuche
                        "></span>
                            加入购物车
                      </div>
                </div>
            </li>
          
      
        </ul> -->

    </div>
    <footer></footer>
</body>
</html>
<script src="js/jQuery.js"></script>
<script>
    $(".header").load("header.html");
    $("footer").load("fotter.html");
</script>
<script>
  $(function(){
    getData();
    getType();
  })
  function getData(){
    $.get('goodsAndShoppingCart/getGoodsList.php',{
      "typeId":"001"
    },function(data){
      let arr = JSON.parse(data);
      // console.log(arr);
      let str = ''
      arr.forEach((item,index)=>{
        str +=`<li goodsid="${item.goodsId}">
          <img src="${item.goodsImg}" >
                <div><span class="s1">￥${item.goodsPrice}</span>
                <span class="s3">已售${item.beiyong1}件</span></div>
                <p class="p1">${item.goodsDesc}</p>
                <p class="p2">豫扶</p>
                <span class="s2"></span>
                <div class="kuang">
                    <div class="duibi">
                        <span class="iconfont icon-icon
                        "></span>对比
                      </div>
                      <div class="shoucang">
                        <span class="iconfont icon-shoucang
                        "></span>
                          收藏
                      </div>
                      <div class="shopcar">
                        <span class="iconfont icon-gouwuche
                        "></span>
                            加入购物车
                      </div>
                </div>
                </li>`
      })
      $('.uls').html(str)
  })
  }

  $('.uls').on('click','li',function(e){
    if(e.target.nodeName == 'LI'){
      console.log(e.target.getAttribute('goodsid'));
      let id = e.target.getAttribute('goodsid')
      location.href='massage.html?goodsId='+id
    }
  })



  function getType(){
    $.get('goodsAndShoppingCart/getGoodsType.php',{
      "typeId":"001"
    },function(data){
      let arr = JSON.parse(data);
      console.log(arr);
      let str = ''
      str +=`<div class="but">${arr[1].goodsType}</div>`

      $(`.goodstypes`).html(str);
  })
  }

  

</script>
